<template>
    <div class="view">
      <div class="title">
        <h2>编辑新闻</h2>
      </div>
      <div class="content">
        <el-form :model="value" label-width="80px" ref="form" size="mini">
          <el-form-item label="标题">
            <el-input v-model="value.title"></el-input>
          </el-form-item>
          <el-form-item label="内容">
            <editor :initVal="value.content" ref="editor"></editor>
          </el-form-item>
          <!-- 标签 -->
          <el-form-item label="标签">
            <el-select v-model="value.tagId" placeholder="请选择">
              <el-option
                v-for="item in values_tag"
                :key="item.tagId"
                :label="item.tagName"
                :value="item.tagId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="value.status" placeholder="请选择">
              <el-option label="草稿" value="draft"></el-option>
              <el-option label="已发布" value="published"></el-option>
              <el-option label="已归档" value="archived"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="update">更新</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <script>
  import { updateapi,getNewsById } from "@/api/news"; 
  import { getapi } from "@/api/tag";
  import editor from "vue2-mditor";
  
  export default {
    name: 'EditNews',
    components: {
      editor
    },
    data() {
      return {
        value: {
          newsId: '',
          title: '',
          content: '',
          status: '', // 有'draft','published','archived'三种状态，分别是草稿，已发布，已归档
          tagId: '',
        },
        values_tag: [],
      };
    },
    created() {
      this.get();
      this.fetchNewsDetail();
    },
    methods: {
      get() {
        getapi(1, 100).then(res => {
          this.values_tag = res.data.tag;
        });
      },
      fetchNewsDetail() {
        let newsId = this.$route.query.newsId;
        if (!newsId) {
          this.$router.push("/news");
          return;
        }
        getNewsById(newsId).then(res => {
            if (res.data === null) {
              this.$router.push("/news");
              return;
            }
            this.value.newsId = res.data.newsId;
            this.value.title = res.data.title;
            this.value.content = res.data.content;
            this.value.status = res.data.status;
            this.value.tagId = res.data.tagId;

            //重新加载编辑器
            this.$nextTick(() => {
            console.log(this.$refs.editor.mditor.value);
            this.$refs.editor.mditor.value = this.value.content;
            });
          
        });
      },
      update() {
        // 获取编辑器内容
        this.value.content = this.$refs.editor.getValue();
        updateapi(this.value).then(res => {
          if (res.code !== 20000) {
            this.$message({
              message: res.msg,
              type: "error"
            });
            return;
          }
          this.$router.push("/news");
        });
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .view {
      padding: 20px;
      width: 100%;
      height: 100%;
      background-color: #fff;
      position: relative;
      padding-left: 80px;
      padding-right: 80px;
  }
  
  h2 {
      font-size: 25px;
      font-weight: 900;
      color: #397ddc;
      margin-bottom: 20px;
  }
  </style>
  